
<template>
<div>
    <!-- <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">分布式系统</div></el-col
      >
    </el-row> -->

<!--头部导航-->
    <el-row :gutter="20">
      <el-col :span="14" :offset="4">
        <div class="second-content bg-purple">
          注意:请在考试开始前校准服务器屏幕右下方的时钟，
          考试过程中调整时钟将导致全体考生需要重新登录系统!
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24"
        ><div class="three-content bg-dark">
          考试监控>>考试任务>>考场管理
        </div></el-col
      >
    </el-row>
    <el-card class="box-card">
      <el-col :span="5"
        ><div class="four-content bg-color">考试任务：-</div></el-col
      >
      <el-col :span="5"
        ><div class="four-content bg-color">开考时间：-</div></el-col
      >
      <el-col :span="5"
        ><div class="four-content bg-color">截止时间：-</div></el-col
      >
      <el-button round>修改考试时间</el-button>
      <el-button round>返回首页</el-button>

      <el-divider></el-divider>

<!--选择显示考生状态模式-->
      <div class="content">
        <span>显示模式:</span>
        <el-select v-model="value" placeholder="请选择模式">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <!--监考步骤-->
        <span>监考步骤:</span>
        <el-button round style="mini">网上领取考卷和名单</el-button>
        <el-button round>开放考试</el-button>
        <el-button round>关闭考试</el-button>
        <el-button round>网上提交考生答卷</el-button>
        <el-button round>导出考生答卷</el-button>
      </div>
      <el-divider></el-divider>


      <!--获取交换机验证码  清除换机验证名单 备份还原考生答卷 -->
      <div>
        <span>待机处理：</span><input />
        <el-button round>应用新的考生换机验证码</el-button>
        <el-button round>清除换机验证名单</el-button>
        <el-button round>了解如何换机</el-button>
        <el-button round>备份选定的考生答卷</el-button>
        <el-button round>还原考生答卷</el-button>
      </div>

      <!--查找考生  修改考试时长-->
      <el-divider></el-divider>
      <span>查找考生： 准考证号/学号: </span>
      <el-input
        width="5px"
        heigth="5px"
        v-model="input"
        placeholder="请输入学号"
      ></el-input>
      <span>姓名： </span
      ><el-input v-model="input" placeholder="请输入姓名"></el-input>
      <el-button size="mini" round>查找</el-button>
      <span>修改考试时长：</span>
      <el-button size="mini" round @click="editTimeVisible = true"
        >修改</el-button
      >
      <el-button @click="editStudentVisible = true">管理考生</el-button>
    </el-card>

    <!--管理考生表-->
    <el-card>
      <div>
        <span>考试服务器已挂载的考试任务：</span>

        <el-table :data="tableData" border style="width: 100%">

          <el-table-column type="selection" width="55"></el-table-column>
          
          <el-table-column prop="Manage" label=" " width="150" height="60">
            <el-button @click="editStudentVisible = true">管理</el-button>
          </el-table-column>
          <el-table-column prop="journal" label=" " width="150" height="60">
          </el-table-column>
          <el-table-column prop="conten" label=" " width="150" height="60">
          </el-table-column>
          <el-table-column
            prop="number"
            label="准考证号/学号"
            width="150"
            height="60"
          >
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="150" height="60">
          </el-table-column>
          <el-table-column
            prop="data"
            label="登录时间 "
            width="150"
            height="60"
          >
          </el-table-column>
          <el-table-column
            prop="data"
            label="结束时间 "
            width="150"
            height="60"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="考生计算机考试ip地址 "
            width="150"
            height="60"
          >
          </el-table-column>
          <el-table-column prop="status" label="状态 " width="150" height="60">
          </el-table-column>
          <el-table-column
            prop=" description"
            label="状态说明 "
            width="150"
            height="60"
          >
          </el-table-column>
        </el-table>
      </div>

<!--分页-->
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="6"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 修改考试时间对话框 -->
    <el-dialog
      title="修改考试时间"
      :visible.sync="editTimeVisible"
      :close-on-click-modal="false"
      width="800px"
    >
      <!-- 修改考试时间表单 -->
      <el-form label-width="150px" :model="editExamTimeForm">
        <el-form-item label="考试名称" prop="examname">
          <el-input
            :disabled="true"
            v-model="editExamTimeForm.examname"
          ></el-input>
        </el-form-item>

        <el-form-item label="说明" prop="examexplain">
          <el-input
            :disabled="true"
            v-model="editExamTimeForm.examexplain"
          ></el-input>
        </el-form-item>

        <el-form-item label="开始时间" prop="starttime">
          <!-- 开始日期 -->
          <el-date-picker
            v-model="editExamTimeForm.starttime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="截止时间" prop="endtime">
          <!-- 截止日期 -->
          <el-date-picker
            v-model="editExamTimeForm.endtime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="考试时长" prop="examTime">
          <el-row>
            <el-col :span="8">
              <el-input v-model="editExamTimeForm.examTime"></el-input>
            </el-col>

            <el-col :span="8">
              <span>分钟</span>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>

      <!-- 底部 -->
      <span slot="footer">
        <el-button @click="editTimeVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 管理考生对话框 -->
    <el-dialog
      title="管理考生"
      :visible.sync="editStudentVisible"
      :close-on-click-modal="false"
      width="800px"
    >
      <!-- 管理考生表单 -->
      <el-form label-width="150px" :model="editStatusForm">
        <el-form-item label="学号" prop="stuid">
          <el-input :disabled="true" v-model="editStatusForm.stuid"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="stupwd">
          <el-input :disabled="true" v-model="editStatusForm.stupwd"></el-input>
        </el-form-item>

        <el-form-item label="姓名" prop="stuname">
          <el-input
            :disabled="true"
            v-model="editStatusForm.stuname"
          ></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="stusex">
          <el-input :disabled="true" v-model="editStatusForm.stusex"></el-input>
        </el-form-item>

        <el-form-item label="考试状态" prop="radio">
          <el-radio v-model="editStatusForm.radio" label="1">允许考试</el-radio>
          <el-radio v-model="editStatusForm.radio" label="2">禁止考试</el-radio>
        </el-form-item>

        <el-form-item label="禁考理由" prop="banReason">
          <el-input
            v-model="editStatusForm.banReason"
            :disabled="editStatusForm.radio == 2 ? false : true"
          ></el-input>
        </el-form-item>

        <el-form-item label="附加时间" prop="addTime">
          <el-row>
            <el-col :span="8">
              <el-input v-model="editStatusForm.addTime"></el-input>
            </el-col>
            <el-col :span="8">
              <span>分钟</span>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>

      <!-- 底部 -->
      <span slot="footer">
        <el-button @click="editStudentVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  data() {
    return {
      input: "",
      tableData: [
        {
          Manage: "管理考生",
          journal: "考生答卷和日志",
          number: "1902040024",
          date: "2016-05-02",
          name: "王小虎",
          address: "192.168.232.2",
        },
        {
          Manage: "管理考生",
          journal: "考生答卷和日志",
          number: "1902040024",
          date: "2016-05-02",
          name: "王小虎",
          address: "192.168.232.2",
        },
        {
          Manage: "管理考生",
          journal: "考生答卷和日志",
          number: "1902040024",
          date: "2016-05-02",
          name: "王小虎",
          address: "192.168.232.2",
        },
        {
          Manage: "管理考生",
          journal: "考生答卷和日志",
          number: "1902040024",
          date: "2016-05-02",
          name: "王小虎",
          address: "192.168.232.2",
        },
        {
          Manage: "管理考生",
          journal: "考生答卷和日志",
          number: "1902040024",
          date: "2016-05-02",
          name: "王小虎",
          address: "192.168.232.2",
        },
        {
          Manage: "管理考生",
          journal: "考生答卷和日志",
          number: "1902040024",
          date: "2016-05-02",
          name: "王小虎",
          address: "192.168.232.2",
        },
      ],

      options: [
        {
          value: "选项1",
          label: "仅显示在线考生",
        },
        {
          value: "选项2",
          label: "仅显示缺考考生",
        },
      ],
      value: "",
      input: "",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,

      //控制修改考试时间对话框
      editTimeVisible: false,
      //控制管理考生对话框
      editStudentVisible: false,
      //修改考试时间表单
      editExamTimeForm: {
        examname: "Android高级应用开发期末考试",
        examexplain: "期末考试XXXX....",
        //存储起止时间
        starttime: "",
        endtime: "",
        //考试时长
        examTime: "120",
      },
      //管理考生表单
      editStatusForm: {
        stuid: "1",
        stupwd: "******",
        stuname: "覃XX",
        stusex: "男",
        //存取考试状态
        radio: "1",
        //禁考理由
        banReason: "",
        //附加时间
        addTime: "0",
      },
    };
  },
};
</script>

<style>
.el-col {
  border-radius: 4px;
  font-size: 25px;
}
.bg-purple-dark {
  background: #7777dd;
}

.bg-purple {
  background: #d8ddeb;
  margin: 5px;
}
.second-content {
  border-radius: 10px;
  min-height: 10px;
  font-size: 10px;
  text-align: center;
}
.three-content {
  border-radius: 3px;
  min-height: 5px;
  font-size: 15px;
}
.bg-dark {
  background: #71baeb;
}

.el-col {
  border-radius: 6px;
}
.bg-color-dark {
  background: white;
}
.bg-color {
  background: white;
}
.bg-color-light {
  background: white;
}
.four-content {
  border-radius: 4px;
  min-height: 10px;
  font-size: 15px;
}
.box-card {
  margin-bottom: 10px;
  margin-top: 10px;
}
.row-bg {
  padding: 5px 0;
  background-color: #f9fafc;
}
.el-button {
  font-size: 10px;
  margin-right: 30px;
 
}

.block {
  float: right;
}
</style>